<template>
    <div>
        <div class="rightTitle">
            <navigation-bar customTitle="区域建筑用能占比分析">
                <div class="searchContent">
                    <label> <i class="el-icon el-icon-upload2 download"></i>&nbsp;&nbsp;导出 </label>
                    <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label>
                </div>
            </navigation-bar>
        </div>
        <div id="chart-container" style="width: 400px; height: 300px; margin: 0 auto"></div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import navigationBar from "@/components/customComponents/managementCenter/navigationBarCustomTitle"
import "echarts-gl"
export default {
    props: ["type"],
    components: {
        navigationBar
    },
    computed: {
        curType() {
            return this.type
        }
    },
    // watch: {
    //     curType(newVal) {
    //         typeName = newVal == 1 || newVal == 4 ? "KWH" : "m³"
    //         this.typeName = newVal
    //     }
    // },
    // data() {
    //     return {
    //         typeName: 2
    //     }
    // },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById("chart-container")
            const myChart = echarts.init(chartDom, null, {renderer: "webgl"})
            const option = {
                // title: {
                // 	text: "能耗分布",
                // 	left: "center",
                // },
                tooltip: {
                    trigger: "item",
                    formatter: `{b} : {c} ${this.type == 1 || this.type == 4 ? "KWH" : "m³"}`
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: [
                            {value: 120, name: "荷园01"},
                            {value: 100, name: "荷园02"},
                            {value: 160, name: "荷园03"},
                            {value: 80, name: "荷园04"},
                            {value: 20, name: "荷园05"}
                        ],
                        label: {
                            show: true,
                            // formatter: "{b}: {c}万"
                            formatter: "{b}: {d}%"
                        },
                        itemStyle: {
                            normal: {
                                depth: 30 // 控制饼图厚度，实现3D效果
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style scoped>
.rightTitle {
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;

    span {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
    label {
        text-align: right;
        float: right;
        color: #3b8cfc;
        margin-right: 15px;
        cursor: pointer;
        font-size: 16px;
    }
    .printer {
        color: #3b8cfc;
    }
    .download {
        color: #3b8cfc;
    }
}
</style>
